import { Button, Tag } from "antd"
import { FC, ReactNode } from "react"

const StatusTag: FC<{
	type: "success" | "error" | "warning" | string
	width?: number
	content: ReactNode
	asButton?: boolean
	renderBg?: boolean
	onClick?: () => void
	size?: "large" | "middle" | "small"
	icon?: ReactNode
	loading?: boolean
	disabled?: boolean
}> = props => {
	return props.asButton ? (
		<Button
			style={{
				borderWidth: "1px",
				borderStyle: "solid",
				borderColor:
					props.type === "success"
						? "#67C23A"
						: props.type === "warning"
						? "#f7c935"
						: props.type === "primary"
						? "#4693f9"
						: undefined,
				backgroundColor: props.renderBg
					? props.type === "success"
						? "#67C23A"
						: props.type === "warning"
						? "#f7c935"
						: props.type === "primary"
						? "#4693f9"
						: undefined
					: undefined,
				width: props.width ?? "auto"
			}}
			danger={props.type === "error"}
			onClick={props.onClick}
			size={props.size ?? "small"}
			icon={props.icon}
			loading={props.loading}
			disabled={props.disabled}
		>
			{props.content}
		</Button>
	) : (
		<Tag
			color={
				props.type === "success"
					? "#67C23A90"
					: props.type === "error"
					? "#fb626090"
					: props.type === "warning"
					? "#cb992f90"
					: undefined
			}
		>
			{props.content}
		</Tag>
	)
}

export default StatusTag
